<!-- src/components/Header.vue -->
<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo" style="display: flex; align-items: center;"
    mode="horizontal"
    :ellipsis="false"
    @select="handleSelect"
  >
    <!-- Logo 菜单项 -->
    <el-menu-item index="0">
      <img
        style="width: 50px; height: auto"
        src="http://hdnla.asia/img/poemplat.png"
        alt="logo"
      />
    </el-menu-item>

    <!-- 主导航 -->
    <el-menu-item index="1">首页</el-menu-item>
    <hr>
    <el-sub-menu index="2">
      <template #title>诗词种类</template>
      <el-menu-item index="2-1">唐诗</el-menu-item>
      <el-menu-item index="2-2">元曲</el-menu-item>
      <el-menu-item index="2-3">宋词</el-menu-item>
      <el-sub-menu index="2-4">
        <template #title>新生诗种</template>
        <el-menu-item index="2-4-1">现代诗</el-menu-item>
        <el-menu-item index="2-4-2">外国诗</el-menu-item>
        <el-menu-item index="2-4-3">其他诗</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>

    <!-- 用户认证 -->
    <el-menu-item v-if="!isLoggedIn" index="3" @click="handleLogin"
      >登录</el-menu-item
    >

    <el-menu-item v-if="isLoggedIn" index="5" @click="handleLogout">
      <span>{{ authStore.user && authStore.user.username || "退出" }}</span>
    </el-menu-item>

    <!-- 功能区 -->
    <el-menu-item index="6">论坛</el-menu-item>
    <el-menu-item index="7">对话</el-menu-item>
    <el-menu-item index="8">诗歌搜索</el-menu-item>
  </el-menu>
</template>

<script setup>
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import { useAuthStore } from "../store/auth";

const router = useRouter();
const authStore = useAuthStore();

// 计算属性：获取登录状态
const isLoggedIn = computed(() => authStore.isLoggedIn);

// 当前激活的菜单项
const activeIndex = ref("1");

// 菜单选择处理
const handleSelect = (key) => {
  console.log("Selected menu:", key);

  switch (key) {
    case "1":
      router.push("/");
      break;
    case "2-1":
      router.push("/tang-poetry");
      break;
    case "2-2":
      router.push("/yuan-poetry");
      break;
    case "2-3":
      router.push("/song-poetry");
      break;
    case "2-4-1":
      router.push("/modern-poetry");
      break;
    case "2-4-2":
      router.push("/foreign-poetry");
      break;
    case "6":
      router.push("/forum");
      break;
    case "7":
      router.push("/chat");
      break;
    case "8":
      router.push("/poetry-search");
      break;
  }
};

// 登录处理
const handleLogin = () => {
  router.push("/login");
};

// 注册处理
const handleRegister = () => {
  router.push("/register");
};

// 退出处理
const handleLogout = () => {
  authStore.logout();
  router.push("/");
};
</script>

<style scoped>
/* 关键样式：通过 index 定位 logo 菜单项 */
.el-menu-item[index="0"] {
  margin-right: 0;
  padding: 0;
}
.el-menu-item[index="1"] {
  margin-right: auto;
}

/* 菜单样式优化 */
.el-menu--horizontal {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.el-menu-item,
.el-sub-menu__title {
  padding: 0 20px;
  font-size: 16px;
  color: #333;
}

.el-menu-item:hover,
.el-sub-menu__title:hover {
  color: #409eff;
}
</style>
